<template>
    <div id="mainTop">
        <v-tabs
            v-model="taskId"
            centered
            light
        >
            <v-tab
                v-for="item in taskItem"
                :key="item"
                @click="change_tab(item)"
            >
                {{ item.text }}
            </v-tab>
        </v-tabs>
        <v-main>
            <router-view 
                @changeTaskID="changeTaskID($event)"
            >
            </router-view>
        </v-main>
    </div>
</template>

<script>
import { defineComponent } from '@vue/composition-api'

export default defineComponent({
    setup() {
        
    },
    data(){
        return {
            taskId: 0,
            taskItem: [
                { text: "我的待办", router: "Summary" },
                { text: "任务汇总", router: "TaskSubtotal" },
                { text: "个人任务", router: "PersonTask" },
                // { text: "TS任务", router: "TsTask" },
                // { text: "JIRA任务", router: "JiraTask" },
                { text: "组员信息维护", router: "GroupInfo"},
                { text: "应用参数配置", router: "KeyConfig"}
            ]
        }
    },
    mounted(){
        this.$emit("changeTaskID", 1)
    },
    methods: {
        change_tab(item) {
            this.$router.push({ name: item.router });
        },
        changeTaskID(e){
            console.log(e)
            this.taskId = e
        }
    },
})
</script>


<style scoped>
#mainTop {
    margin-left: 2%;
    margin-right: 2%;
}
</style>